<template>
  <div>
    <div class="test1">

    </div>
    <div class="test2">

    </div>
    <div class="test3">

    </div>
  </div>
</template>


<style scoped>
  .test1{
    margin-top: 100px;
    background: #2488ff;
    border: 16px solid transparent;
    background-origin: border-box;
    padding: 16px;
    background-clip: padding-box,border-box;
    background-image:
      linear-gradient(#fff,#fff),
      repeating-linear-gradient(45deg,rgba(255,255,255,0.5), rgba(255,255,255,0.8) 10px, transparent 0,transparent 20px);
    height: 200px;
    width: 200px;
  }
  .test2{
    margin-top: 100px;
    background: #2488ff;
    background-image:
      repeating-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.8) 10px, transparent 0,transparent 20px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.8) 10px, transparent 0,transparent 20px);
    height: 200px;
    width: 200px;
  }

  .test3{
    margin-top: 100px;
    background: #2488ff;
    border: 16px solid transparent;
    background-origin: border-box;
    padding: 16px;
    background-clip: padding-box,border-box;
    background-image:
      linear-gradient(#fff,#fff),
      repeating-linear-gradient(45deg,rgba(255,255,255,0.5), rgba(255,255,255,0.8) 10px, transparent 0,transparent 28.82px);
    height: 200px;
    width: 200px;
    animation: test 12s linear infinite;
  }
  @keyframes test {
    0%{
      background-position: 0%;
    }
    100%{

      background-position: 200px;
    }
  }
</style>
